<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../css/lzjanniu.css">

</head>
<body>
<div class="container">
<!--  所属小区-->
  <br /><br />
  <div class="col-xs-2">
    <div class="form-group">
      <label class="sr-only" for="ssxqxl">Amount (in dollars)</label>
      <div class="input-group">
        <div class="input-group-addon">所属小区</div>

        <select class="selectpicker" id="ssxqxl" placeholder="Amount" style="width: 105px ;height: 30px">
          <option>请选择</option>
        </select>
      </div>
    </div>
  </div>

<!--车位状态-->
    <div class="col-xs-2">
    <div class="form-group">
      <label class="sr-only" for="cwztxl">Amount (in dollars)</label>
      <div class="input-group">
        <div class="input-group-addon">车位状态</div>

        <select class="selectpicker" id="cwztxl" placeholder="Amount" style="width: 105px ;height: 30px">
          <option>请选择</option>
          <option>空闲</option>
          <option>占用</option>
        </select>
      </div>
    </div>
</div>
<!--车位编号-->
  <div class="col-xs-4">
    <div class="form-group">
      <label class="sr-only" for="cwbhxl">Amount (in dollars)</label>
      <div class="input-group">
        <div class="input-group-addon">车位编号：</div>
<!--        输入框-->
        <input type="text" class="form-control" id="cwbhxl" placeholder="只能输入数字"style="width: 155px ;height: 30px"
               onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
        >

      </div>
    </div>
  </div><!-- /.col-lg-6 -->
<!--给综合查询按钮设置id 然后绑定点击事件-->
  <button class="button2 "id="cwzhcx" >
    综合查询
  </button>
  <button class="button2 btn-lg" data-toggle="modal" data-target="#myModal">
    添加
  </button>
<!--  模态框-->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
                  aria-hidden="true">×
          </button>
          <h4 class="modal-title" id="myModalLabel">
            车位信息维护
          </h4>
        </div>
        <div class="modal-body">

          <table>
            <tr>
              <td>小区</td>
              <td>
                <select id="xq" name="skills" style="height: 25px; width: 70%;">
                  <option value="luo">请选择</option>
                  <option value="ke">1</option>
                  <option value="pang">2</option>
                </select>

              </td>
            </tr>
            <tr>
              <td>车位面积：</td>
              <td>
                <input type="text" class="form-control " placeholder="只可输入数字" id="cwmj" style="height: 25px; width: 70%;"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>
            <tr>
              <td>车位类型：</td>
              <td>
                <select id="cwlx" name="skills" style="height: 25px; width: 70%;">
                  <option value="luo">请选择</option>
                  <option value="ke">1</option>
                  <option value="pang">2</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>收费标准：</td>
              <td>
                <input type="text" class="form-control " style="height: 25px; width: 70%;" id="whsfbz" placeholder="只可输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>
            <tr>
              <td>备注：</td>

              <td>
                <input type="text" id="bz" class="form-control"  aria-describedby="basic-addon2" style="height: 25px; width: 70%;" >
              </td>
            </tr>
          </table>
        </div>

        <div class="modal-footer">

          <button type="button" class="button2 btn-default"
                  data-dismiss="modal">关闭
          </button>
          <button type="button" class=" button2 btn-primary" id="mttj">
            提交
          </button>
        </div>
      </div>
    </div>
  </div>


<!--查看的模态框-->
  <div class="modal fade" id="chakanmotai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
    <div class="modal-dialog" style="width: 800px">
      <div class="modal-content"style="width: 800px">
        <div class="modal-header"style="width: 800px">
          <button type="button" class="close" data-dismiss="modal"
                  aria-hidden="true">×
          </button>
          <h4 class="modal-title" id="myModalLabel1">
            车位信息查看
          </h4>
        </div>
        <div class="modal-body" style="width: 800px">
<!--车位信息查看模态框-->

            <table class="table table-hover table-bordered" id="cltable" style="width: 800px">
              <tr>
                <td>
                  车辆编号
                </td>
                <td>住户编号</td>
                <td>车位编号</td>
                <td>停车卡号</td>
                <td>车主姓名</td>
                <td>车主手机号</td>
                <td>车牌号</td>
                <td>行驶证号</td>

              </tr>

          </table>
        </div>

        <div class="modal-footer" style="width: 800px">

          <button type="button" class="button2 btn-default"
                  data-dismiss="modal">关闭
          </button>

        </div>
      </div>
    </div>
  </div>

<!--  修改模态框-->
  <div class="modal fade" id="xiugaimotai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" >
    <div class="modal-dialog" >
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
                  aria-hidden="true">×
          </button>
          <h4 class="modal-title" id="myModalLabel2">
            修改车位信息
          </h4>
        </div>
        <div class="modal-body">


          <table class="table table-hover table-bordered">
            <tr>
              <td>
                所属小区
              </td>
              <td>
                <!-- 修改小区-->
                <select id="xgxq" name="skills"style="width: 150px; height: 20px" >
                  <option value="luo">请选择</option>
                  <option value="ke">1</option>
                  <option value="pang">2</option>
                </select>
              </td>
              <td>车位类型</td>
              <td>
                <select id="xgcwlx" name="skills" style="width: 150px; height: 20px">
                  <option value="luo">请选择</option>
                  <option value="ke">1</option>
                  <option value="pang">2</option>
                </select>
              </td>

            </tr>
            <tr>
              <td>车位状态</td>
              <td>
                <input type="text" class="form-control" id="xgcwzt"style="width: 150px; height: 20px"  disabled>
<!--onfocus=this.blur()-->

              </td>
              <td>车位面积</td>
              <td>
                <input type="text" class="form-control" id="xgcwmj" placeholder="只可输入数字"style="width: 150px; height: 20px"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
            </tr>
            <tr>
              <td>收费标准</td>
              <td>
                <input type="text" class="form-control" id="xgsfbz" placeholder="只能输入数字"style="width: 150px; height: 20px"
                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                >
              </td>
              <td>备注</td>
              <td>
                <input type="text" class="form-control" id="xgbz" placeholder="Amount" style="width: 150px; height: 20px">

              </td>
            </tr>


          </table>
        </div>

        <div class="modal-footer" >
          <button type="button" class=" button2 btn-primary" id="xgtj">
            提交
          </button>
          <button type="button" class="button2 btn-default"
                  data-dismiss="modal">关闭
          </button>

        </div>
      </div>
    </div>
  </div>


  <button class="button2" id="btnDelSpell">
    批量删除
  </button>



  <br /><br /><br /><br />
  <table class="table table-hover table-bordered" id="cwtable">
    <tr>
      <td>


        <input type="checkbox" value="">



      </td>
      <td>车位编号</td>
      <td>所属小区</td>
      <td>车位类型</td>
      <td>车位状态</td>
      <td>车位面积</td>
      <td>备注</td>
      <td>收费标准</td>

    </tr>
  </table>

</div>
<script type="text/javascript">
  /**
   * 给小区下拉框赋值
   */
  $.ajax({
    url:"getxiaoqu",
    type:"get",
    dataType:"json",
    success:function(data){
      console.log(data);
      $("#ssxqxl").empty();//重点1,第一步,把id为ssxqxl的标签置空
      $("#ssxqxl").append('<option>请选择</option>>')
      $("#xq").empty();
      $("#xq").append('<option>请选择</option>>')
      $("#xgxq").empty();
      $("#xgxq").append('<option>请选择</option>>')
      for(let i = 0;i < data.length;i++) {
        let xq = data[i];
        let vid=xq.vid;
        let vname=xq.vname;

        $("#ssxqxl").append('<option>' + vname + '</option>');
        $("#ssxqxl option").each(function () {
          text = $(this).text();
          if ($("#ssxqxl option:contains(" + text + ")").length > 1)
            $("#ssxqxl option:contains(" + text + "):gt(0)").remove();
        });
        //小区
        $("#xq").append('<option>' + vname + '</option>');
        $("#xq option").each(function () {
          text = $(this).text();
          if ($("#xq option:contains(" + text + ")").length > 1)
            $("#xq option:contains(" + text + "):gt(0)").remove();
        });
        /**
         * 去除重复值
         */
        $("#xgxq").append('<option>' + vname + '</option>');
        $("#xgxq option").each(function () {
          text = $(this).text();
          if ($("#xgxq option:contains(" + text + ")").length > 1)
            $("#xgxq option:contains(" + text + "):gt(0)").remove();
        });
      }



    }

  })

</script>
<!--页面加载全部的车位信息-->
<script type="text/javascript">
  $.ajax({
    url:"getcw",
    type:"get",
    dataType:"json",
    success:function(data){
      console.log(data);
//清楚下拉框数据

      //重点1,第一步,把idw为xq的标签置空

      $("#cwlx").empty();
      $("#cwlx").append('<option>请选择</option>>')


      $("#xgcwlx").empty();
      $("#xgcwlx").append('<option>请选择</option>>')


      for(let i = 0;i < data.length;i++){

        let cw=data[i];
        let pid=cw.pid;
        let vid=cw.vid;
        let vname=cw.vname;
        let tid=cw.tid;
        let sid=cw.sid;

        let parea=cw.parea;
        let remark=cw.remark;
        let caid=cw.caid;




        //创建tr
        let newTr = document.createElement("tr");
        let checkbox = document.createElement('td');//创建列
        let btnCheckbox = document.createElement('input');
        btnCheckbox.setAttribute('name','ckb');
        btnCheckbox.setAttribute('type','checkbox');
        btnCheckbox.setAttribute('value','false');
        checkbox.appendChild(btnCheckbox);


        let t2 = document.createElement("td");
        $(t2).html(pid);
        let t3 = document.createElement("td");
        $(t3).html(vname);
        let t4 = document.createElement("td");
        $(t4).html(tid);

        let t5 = document.createElement("td");
        $(t5).html(sid);
        let t6 = document.createElement("td");
        $(t6).html(parea);
        let t7 = document.createElement("td");
        $(t7).html(remark);
        let t8 = document.createElement("td");
        $(t8).html(caid);
        let czTd = document.createElement("td");
        if (sid=="空闲"){
          czTd.innerHTML ="<button  class=\"button2\" type=\"button\"onclick=\"deleteCw("+pid+")\"/>删除</button>" +
                  "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#xiugaimotai\" onclick=\"xiugai("+pid+")\"/>修改</button>"
        }else {
          czTd.innerHTML = "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#chakanmotai\" onclick=\"chakan("+pid+")\"/>查看</button>";


        }


        $(newTr).append(checkbox);
        $(newTr).append(t2);
        $(newTr).append(t3);
        $(newTr).append(t4);
        $(newTr).append(t5);
        $(newTr).append(t6);
        $(newTr).append(t7);
        $(newTr).append(t8);
        $(newTr).append(czTd);
          //把数据塞入table中
          $("#cwtable").append(newTr);


//给所属小区添加下拉框值






          //车位类型
          $("#cwlx").append('<option>' + tid + '</option>');
          $("#cwlx option").each(function () {
          text = $(this).text();
          if ($("#cwlx option:contains(" + text + ")").length > 1)
            $("#cwlx option:contains(" + text + "):gt(0)").remove();
        });
          //修改小区

        $("#xgcwlx").append('<option>' + tid + '</option>');
        $("#xgcwlx option").each(function () {
          text = $(this).text();
          if ($("#xgcwlx option:contains(" + text + ")").length > 1)
            $("#xgcwlx option:contains(" + text + "):gt(0)").remove();
        });






        };



      }



  });
  //删除数据
  function deleteCw(pid){
    //发送请求给 后台 完成删除工作
    //1.后端 删除数据
    //2.前端 删展示【拿到后端删除成功的信号】
    $.ajax({
      url:"deleteCwxx",
      type:"post",
      data: {"pid":pid},
      dataType:"json",//设置响应参数类型
      success:function(data){
        alert(pid);

        if(data.ok){
          //在前端进行删除
          //
          alert("删除成功");
         window.location.reload();
        }else{
          //
          alert("删除失败");
        }
      }
    });
  }

  //综合查询
  $("#cwzhcx").on("click",function () {
    let ssxqxl = $("#ssxqxl").val();
    let cwztxl = $("#cwztxl").val();
    let cwbhxl = $("#cwbhxl").val();
    $.ajax({
      url: "cwxxzhcx",
      type: "post",
      dataType: "json",
      data: {ssxqxl: ssxqxl,cwztxl:cwztxl,cwbhxl:cwbhxl},
      success: function (data) {
        console.log(data);
        $("#cwtable tr").not(":first").remove();
        console.log(data);

        for(let i = 0;i < data.length;i++){
          let cw=data[i];
          let pid=cw.pid;
          let vid=cw.vid;
          let tid=cw.tid;
          let sid=cw.sid;
          let vname=cw.vname;
          let parea=cw.parea;
          let remark=cw.remark;
          let caid=cw.caid;

//给所属小区添加下拉框值


          //创建tr
          let newTr = document.createElement("tr");
          let checkbox = document.createElement('td');//创建列
          let btnCheckbox = document.createElement('input');
          btnCheckbox.setAttribute('name','ckb');
          btnCheckbox.setAttribute('type','checkbox');
          btnCheckbox.setAttribute('value','false');
          checkbox.appendChild(btnCheckbox);


          let t2 = document.createElement("td");
          $(t2).html(pid);
          let t3 = document.createElement("td");
          $(t3).html(vname);
          let t4 = document.createElement("td");
          $(t4).html(tid);

          let t5 = document.createElement("td");
          $(t5).html(sid);
          let t6 = document.createElement("td");
          $(t6).html(parea);
          let t7 = document.createElement("td");
          $(t7).html(remark);
          let t8 = document.createElement("td");
          $(t8).html(caid);
          let czTd = document.createElement("td");
          if (sid=="空闲"){
            czTd.innerHTML ="<button  class=\"button2\" type=\"button\"onclick=\"deleteCw("+pid+")\"/>删除</button>" +
                    "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#xiugaimotai\" onclick=\"xiugai("+pid+")\"/>修改</button>"
          }else {
            czTd.innerHTML = "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#chakanmotai\" onclick=\"chakan("+pid+")\"/>查看</button>";


          }


          $(newTr).append(checkbox);
          $(newTr).append(t2);
          $(newTr).append(t3);
          $(newTr).append(t4);
          $(newTr).append(t5);
          $(newTr).append(t6);
          $(newTr).append(t7);
          $(newTr).append(t8);
          $(newTr).append(czTd)
          //把数据塞入table中
          $("#cwtable").append(newTr);



           $("#ssxqxl").append('<option>' + vname + '</option>');
          $("#ssxqxl option").each(function () {
            text = $(this).text();
            if ($("#ssxqxl option:contains(" + text + ")").length > 1)
              $("#ssxqxl option:contains(" + text + "):gt(0)").remove();
          });

          }



      }
      })
  })
  /**
   * 删除选中的资料
   * 批量删除信息
   */
  $("#btnDelSpell").click(function () {
    var checkLength = $("input:checkbox[name='ckb']:checked").length;
    if(checkLength == 0) {
      alert("请至少选择一条信息！");
      return;
    }
    $("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态
      if($(this).prop("checked")){ //如果值为checked表明选中了
       // alert("确认删除车位为"+$(this).closest('tr').find('td').eq(1).text()+"的信息吗"); //获取eq为1的那一列数据
       let fxk=($(this).closest('tr').find('td').eq(1).text());
        alert("确认删除车位为"+fxk+"的信息吗");
        $.ajax({
          url:"deleteinbatches",
          type:"post",
          data: {"fxk":fxk},
          dataType:"json",//设置响应参数类型
          success:function(data){
            //alert(data);
            if(data.ok){
              //在前端进行删除
              //
              alert("删除成功");
              window.location.reload();
            }else{
              //
              alert("删除失败车位占用不可删除");
            }
          }
        });





      }
    });
  });
  /**
   * 添加车位信息
   */
  $("#mttj").on("click",function () {
    let xq = $("#xq").val();
    let cwmj = $("#cwmj").val();
    let cwlx = $("#cwlx").val();
    let whsfbz = $("#whsfbz").val();
    let bz = $("#bz").val();
    if (cwmj.length>0) {

    }
    else {
      alert("车位面积不能为空");
      return;
    }
    if (whsfbz.length>0) {

    }else {
      alert("收费不能为空");
      return;
    }
    if (bz.length>0) {

    }else {
      alert("备注不能为空");
      return;
    }
    if (xq=="请选择"){
      alert("小区未选择");
      return
    }
    if (cwlx=="请选择"){
      alert("车位类型未选择");
      return
    }
    $.ajax({
      url: "tianjia",
      type: "post",
      dataType: "json",
      data: {xq: xq, cwmj: cwmj, cwlx: cwlx,whsfbz:whsfbz,bz,bz},
      success:function(data){
        //alert(data);
        if(data.ok){

          //在前端进行删除
          //
          alert("添加成功");
          window.location.reload();

        }else{
          //
          alert("添加失败请重新尝试");
        }
      }
    });


  })
  /**
   * 查看信息，根据id查询车位信息车辆信息
   */

    function chakan(pid){
    $.ajax({
      url: "chaxunchewei",
      type: "post",
      dataType: "json",
      data: {pid: pid},
      success: function (data) {
       // alert(pid);
       // alert(data)
        //控制台打印data
        console.log(data);
        for (let i = 0; i < data.length; i++) {
          $("#cltable tr").not(":first").remove();
          let cl = data[i];
          let ccid = cl.ccid;
          let aid = cl.aid;
          let carid = cl.pid;
          let stopid = cl.stopid;
          let cname = cl.cname;
          let ctel = cl.ctel;
          let cnumber = cl.cnumber;
          let cxcz = cl.cxcz;
          console.log(aid);


          //创建tr
          let newTr = document.createElement("tr");
          //创建td
          let t1= document.createElement("td");
          // 往td存数据
          $(t1).html(ccid);
          let t2 = document.createElement("td");
          $(t2).html(aid);
          let t3 = document.createElement("td");
          $(t3).html(carid);
          let t4 = document.createElement("td");
          $(t4).html(stopid);

          let t5 = document.createElement("td");
          $(t5).html(cname);
          let t6 = document.createElement("td");
          $(t6).html(ctel);
          let t7 = document.createElement("td");
          $(t7).html(cnumber);
          let t8 = document.createElement("td");
          $(t8).html(cxcz);
          $(newTr).append(t1);
          $(newTr).append(t2);
          $(newTr).append(t3);
          $(newTr).append(t4);
          $(newTr).append(t5);
          $(newTr).append(t6);
          $(newTr).append(t7);
          $(newTr).append(t8);

          //把数据塞入table中
          $("#cltable").append(newTr);

        }

      }





    })


  }

  /**
   * 修改信息
   */
  function xiugai(pid) {
    $.ajax({
      /**
       * 修改信息前读取数据库查询数据，然后赋值到输入框
       */
      url: "xiugaixinxichaxun",
      type: "post",
      data: {"pid": pid},
      dataType: "json",//设置响应参数类型
      success: function (data) {
        for(let i = 0;i < data.length;i++) {
          let cw = data[i];
          let pid = cw.pid;
          let vid = cw.vid;
          let tid = cw.tid;
          let sid = cw.sid;
          let vname=cw.vname;
          let parea = cw.parea;
          let remark = cw.remark;
          let caid = cw.caid;
          //车位类型
          $("#xgcwlx").val(tid);
          //小区
          $("#xgxq").val(vname);
          //状态
          $("#xgcwzt").val(sid);
          //面积
          $("#xgcwmj").val(parea);

          $("#xgsfbz").val(caid);

          $("#xgbz").val(remark);

        }

      }
    })



    $("#xgtj").click(function () {

      // let pid= $("#xiugai("+pid+")").val();
      let xgxq = $("#xgxq").val();
      let xgcwlx = $("#xgcwlx").val();
      let xgcwzt = $("#xgcwzt").val();
      let xgcwmj = $("#xgcwmj").val();
      let xgsfbz = $("#xgsfbz").val();
      let xgbz = $("#xgbz").val();
      //alert(pid);
      if (xgxq == "请选择") {
        alert("小区未选择");
        return
      }
      if (xgcwlx == "请选择") {
        alert("车位类型未选择");
        return
      }
      if (xgcwzt == "请选择") {
        alert("车位状态未选择");
        return
      }
      if (xgcwmj.length > 0) {

      } else {
        alert("面积不能为空");
        return;
      }
      if (xgsfbz.length > 0) {

      } else {
        alert("收费标准不能为空");
        return;
      }
      if (xgbz.length > 0) {

      } else {
        alert("备注不能为空");
        
        return;
      }


      $.ajax({
        url: "xiugaixinxi",
        type: "post",
        data: {
          "pid": pid,
          "xgxq": xgxq,
          "xgcwlx": xgcwlx,
          "xgcwzt": xgcwzt,
          "xgcwmj": xgcwmj,
          "xgsfbz": xgsfbz,
          "xgbz": xgbz
        },
        dataType: "json",//设置响应参数类型
        success: function (data) {
          // alert(pid);

          if (data.ok) {
            //在前端进行删除
            //
            alert("修改成功");
            window.location.reload();
          } else {
            //
            alert("修改失败");
          }
        }
      });

    })
  }




</script>
</body>
</html>